<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>国内折扣列表</title>
</head>
<link rel="stylesheet" href="css/inlanddiscount.css">
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.js"></script>
<script src="js/template.js"></script>
<script src="lib/jquery/jquery.js"></script>
<script src="js/inlanddiscount.js"></script>
<body>
<!--顶部-->
<div class="shen clearfix ">
    <a href="index.html" class="glyphicon glyphicon-chevron-left fl"></a>
    <div class="fl">国内折扣</div>
    <img src="images/header_app.png" alt="" class="fr">
</div>
<!--商品-->
<div class="main clearfix">
    <a href="">
        <div class="fl">
            <img src="" alt="">
            <p></p>
            <p class="lai"></p>
        </div>
    </a>
</div>


<!--底部-->
<ul class="na clearfix" role="tablist">
    <li><a href="#">登陆</span></a></li>
    <li><a href="#">注册</a></li>
    <li><a href="#">返回顶部 </a></li>
</ul>
<div class="gong">手机APP下载<a href=""> 慢慢买手机版 --掌上比价平台</a>
    <p>m.m.maimai.com</p>
</div>
</body>
<script>
    $(function () {
        var inlener = {
            result: []
        }
        $.ajax({
            type: 'get',
            url: 'http://192.168.23.81:3000/api/getinlanddiscount',
            dataType: 'json',
            success: function (data) {
//            console.log(data);
                for (var i = 0; i < 4; i++) {
                    inlener.result.push(data.result[i])
                    var html = template("template", inlener)
                    $(".main").html(html);
                }
//            添加监听事件
                window.addEventListener("touchstart", function (e) {
                    startY = e.touches[0].pageY
                console.log(startY);
                })
                window.addEventListener("touchmove", function (e) {
                    endY = e.touches[0].pageY
                })
                window.addEventListener("touchend", function () {
                    var distancY = endY - startY
                    console.log(distancY);
                    if (distancY < -50) {
                        $.ajax({
                            type: 'get',
                            url: 'http://192.168.23.81:3000/api/getinlanddiscount',
                            dataType: 'json',
                            success: function (data) {
                                for (var i = 0; i < 4; i++) {
                                    if (inlener.result.length < data.result.length) {
                                        inlener.result.push(data.result[inlener.result.length])
                                        var html = template("template", inlener)
                                        $(".main").html(html);
                                    }
                                }
                            }
                        })
                    }
                })
            }
        })

    })

</script>
<script type="text/html" id="template">
    {{if result}}
    {{each result as value}}
    <a href="getinland.html?productid={{value.productId}}">
        <div class="fl">
            {{#value.productImg}}
            <p>{{value.productName}}</p>
            <p class="lai">{{value.productFrom}}</p>
        </div>
        </a>
        {{/each}}
        {{/if}}
</script>
</html>